<?php $this->layout='main'; ?>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/scriptbreaker-multiple-accordion-1.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("#sub-nav").accordion({
		accordion:false,
		speed: 300,
		closedSign: '',
		openedSign: ''
	});
});

</script>
<script>
var selectedProductID=0;
var selectedElement;//the selected product link
var selectedProductName;

/*
* called when select a product link
*/
function assignProductID(event, element, productID, productName)
{
	selectProduct(event);
	selectedProductID=productID;
	selectedElement=element;
	selectedProductName=productName;
}

function deleteProductItem(data)
{
	if(data=='delete-product-success')
	{
		$('#msg-header').show();
		$('#msg-header').html('<b>\''+selectedProductName+'\'</b> has been removed.');
		
		var productLI=selectedElement.parentNode;//the item with <ul> tag
		var productUL=productLI.parentNode;//the item with <li> tag
		productUL.removeChild(productLI);
		if(productUL.children.length==0)//delete the category if no products are under it
		{
			var categoryLI=productUL.parentNode;
			var productlistArea=categoryLI.parentNode;
			productlistArea.removeChild(categoryLI);
		}
			
	}
}

function addProductItem(data)
{
	if(data.indexOf('add-product-fail')<0)//if the add operation didn't fail
	{
		document.getElementById('sub-nav').innerHTML=data;//display the product list view
		$("#sub-nav").accordion({
			accordion:false,
			speed: 300,
			closedSign: '',
			openedSign: ''
		});
	}
	else
	{
		alert("You already have this product.");
	}
}

/*
* confirm with client if deleting the product
* send delete request if yes
*/
function clickOnDelete()
{
	var message='';
	if(selectedProductID==0)
	{
		message='You need to select one product.';
	}
	else
	{
		message='Are you going to delete product "'+selectedProductName+'"?';
	}
	var toDelete=window.confirm(message);
	if(toDelete)
	{
		if(selectedProductID==0)
			return false;
		
		$.ajax({
	       url: '<?php echo CController::createUrl('myProducts/deleteProduct');?>',
	       type: 'post',
	       dataType: 'json',
	       data: {product_ID:selectedProductID},
	       success: deleteProductItem
	     });
	}
	selectedProductID=0;
	return false;
}

/*
* confirm with client if adding the new product
* send add request if yes
*/
function clickOnAdd()
{
	var element=document.getElementById('products');
	var message='Are you going to add product "'+element.options[element.selectedIndex].innerHTML+'"?';
	var toAdd=window.confirm(message);
	if(toAdd)
	{
		$.ajax({
	       url: '<?php echo CController::createUrl('myProducts/addProduct');?>',
	       type: 'post',
	       dataType: 'text',
	       data: {product_ID:element.options[element.selectedIndex].value},
	       success: addProductItem
	     });
	}
	return false;
}

/*
* udpate the items in product drop down list when changing a new product
* category
*/
function updateProducts(data)
{
	var element = document.getElementById('products');
	for(var i=element.options.length-1; i>=0; i--)
	{
		element.remove(i);
	}
	for(key in data)
	{
		var option = document.createElement('OPTION');
		option.value = key;
		option.text = data[key];
		element.options.add(option);
	}
}

/*
* send updating product list request when changing a new product
* category
*/
$(document).ready(function ()
{
	$('#product_category').change(function (){
     $.ajax({
       url: '<?php echo CController::createUrl('myProducts/products');?>',
       type: 'post',
       dataType: 'json',
       data: {product_category:this.value},
       success: updateProducts
     });
   });
});

function selectProduct(event) {
	$('#msg-header').hide();
	$('#msg-header').html('');
	$('li ul li a').css('background-color','#DCDDDE');
	$(event.target).css('background-color','#B8B8B8');
}
</script>

<div id="my-products">
<div id="my-products-contents">
<div id="my-products-head">My Products</div>

<div class="what-i-offer">
<div class="what-i-offer-container">

<div class="what-i-offer-cont" >
<div class="offer-head">What I Offer</div>
<div id='products-list-area' class='scroll-pane-arrows2'>
    <ul id="sub-nav">
	<?php $this->renderPartial('productlist', array('productTypes'=>$productTypes)); ?>
	</ul> 
</div>

</div><!-- End What I Offer Contents -->


<ul class="green-buttons3">
    <li>
    	<?php
    		echo CHtml::link('<img src="'.Yii::app()->request->baseUrl.'/images/delete4.gif"/>', '#', array(
						'onclick'=>'return clickOnDelete();'
					));
    	?>
    </li>
</ul>

</div><!-- End What I Offer Container -->
</div><!-- End What I Offer -->



<div class="what-ilike-offer">
<div class="what-i-offer-container">

<div class="what-i-offer-cont">
<div class="offer-head">What I would like to offer as well ...</div>
<div id='add-product-area'>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>Product Category</th>
          <td>
          	<div class="sp-textbox9">
	    		<?php echo CHtml::dropDownList('product_category', '', ProductTypes::model()->getProductCategoryInfo()); ?>
          	</div>
          </td>
        </tr>
        <script>document.getElementById('product_category').selectedIndex=0;</script>
        <tr>
          <th width="120">Product</th>
          <td>
          	<div class="sp-textbox9">
          		<?php echo CHtml::dropDownList('products', '', ProductTypes::model()->getProductsByCategory(ProductTypes::model()->find()->product_type_ID)); ?>
          	</div>
          </td>
        </tr>
    </table>
</div>

</div><!-- End What I Offer Contents -->


<ul class="green-buttons3">
    <?php
        echo CHtml::link('<img src="'.Yii::app()->request->baseUrl.'/images/add-product.jpg"/>', '#', array(
						'onclick'=>'return clickOnAdd();'
					));
    ?>
</ul>

</div><!-- End What I Offer Container -->
</div><!-- End What I Like Offer -->



<div id="my-products-ch">Ask us about other products to look into!</div>
</div><!-- End My Products Contents -->
</div><!-- End My Products -->